<template>
    <div class="listDiv">
        <div class="searchDiv">
            <el-input v-model="obj.req.key" placeholder="匹配用户名称" class="search_key" clearable />
            <span class="btn search" @click="obj.req.currentpage=1;init()"></span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight">
                <span class="btn add" @click="add">添加用户</span>
            </div>
        </div>
        <div class="table" id="tb">
            <ul class="head">
                <li class="liflex">姓名</li>
                <li class="litime">最后登录时间</li>
                <li class="liaction">操作</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="liflex">{{x.name}}</li>
                    <li class="litime">{{x.last_login_time}}</li>
                    <li class="liaction">
                        <u @click.prevent="edit(x)">编辑</u>
                        <DelConfirm @yesClick="del(x)" />
                    </li>
                </ul>
            </div>
        </div>
        <Pager :value="obj.req" :init="init" />
        <el-drawer v-model="obj.drawer.show" :title="obj.drawer.title" size="50%" direction="rtl" :close-on-click-modal="false" destroy-on-close>
            <Edit v-model:id="obj.drawer.id" @init="init" @close="obj.drawer.show = false" />
        </el-drawer>
    </div>
</template>

<script setup>
    import { reactive,getCurrentInstance } from 'vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    import Edit from './edit.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            show: false,
            title: "",
            id: 0
        },
        ary:[],
        req:{
            currentpage: 1,
            pagesize: 10,
            count: 0,
            key: "",
        }
    })

    let init = () => {
        proxy.$ajax({
            url: '/manager/user/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    let add = () => {
        obj.drawer.show = true
        obj.drawer.title = "添加用户"
        obj.drawer.id = 0;
    }
    let edit = x => {
        obj.drawer.show = true
        obj.drawer.title = "修改用户"
        obj.drawer.id = parseInt(x.userid);
    }

    let del = x => {
        proxy.$ajax({
            url: '/manager/user/delete',
            data: { userid: x.userid },
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("删除成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
</style>